﻿@{
    ViewBag.Title = "Index";
    ViewBag.AppName = "phonecat";
    Layout = "~/Views/Angular/_AngularLayout.cshtml";
}

<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
    <meta charset="utf-8">
    <title>My Angular Page</title>
    <link href="~/Content/themes/base/bootstrap/bootstrap.css" rel="stylesheet" />
    <style type="text/css">
    /* app css stylesheet */
    body {
        padding-top: 20px;
    }

    .phones {
        list-style: none;
    }

    .thumb {
        float: left;
        margin: -1em 1em 1.5em 0em;
        padding-bottom: 1em;
        height: 100px;
        width: 100px;
    }

    .phones li {
        clear: both;
        height: 100px;
        padding-top: 15px;
    }

    /** Detail View **/
    img.phone {
        float: left;
        border: 1px solid black;
        margin-right: 3em;
        margin-bottom: 2em;
        background-color: white;
        padding: 2em;
        height: 400px;
        width: 400px;
    }

    ul.phone-thumbs {
        margin: 0;
        list-style: none;
    }

    ul.phone-thumbs li {
        border: 1px solid black;
        display: inline-block;
        margin: 1em;
        background-color: white;
    }

    ul.phone-thumbs img {
        height: 100px;
        width: 100px;
        padding: 1em;
    }

    ul.phone-thumbs img:hover {
        cursor: pointer;
    }


    ul.specs {
        clear: both;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    ul.specs > li{
        display: inline-block;
        width: 200px;
        vertical-align: top;
    }

    ul.specs > li > span{
        font-weight: bold;
        font-size: 1.2em;
    }

    ul.specs dt {
        font-weight: bold;
    }

    h1 {
        border-bottom: 1px solid gray;
    }
    </style>
</head>
<body ng-controller="PhoneListCtrl">

    <p>Nothing here {{'yet' + '!'}}</p>
    <p>1 + 2 = {{ 1 + 2 }}</p>

    <div ng-view></div>

    <script src="~/Scripts/libs/angular/angular.js"></script>
    <script src="~/Scripts/libs/angular/angular-resource.js"></script>

    <script type="text/javascript">

        angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
            config(['$routeProvider', function ($routeProvider) {
                $routeProvider.
                    when('/phones', { templateUrl: '/Templates/Angular/phones/partials/phone-list.html', controller: PhoneListCtrl }).
                    when('/phones/:phoneId', { templateUrl: '/Templates/Angular/phones/partials/phone-detail.html', controller: PhoneDetailCtrl }).
                    otherwise({ redirectTo: '/phones' });
            }]);

        angular.module('phonecatFilters', []).filter('checkmark', function () {
            return function (input) {
                return input ? '\u2713' : '\u2718';
            };
        });

        angular.module('phonecatServices', ['ngResource']).
            factory('Phone', function ($resource) {
                return $resource('/Angular/PhoneData', {}, {
                    query: { params: {}, isArray: true },
                    info: { params: {}, isArray: false }
                });
            });

        function PhoneListCtrl($scope, Phone) {
            $scope.phones = Phone.query();

            $scope.orderProp = 'age';
        };

        function PhoneDetailCtrl($scope, $routeParams, Phone) {
            $scope.phone = Phone.info({ phoneId: $routeParams.phoneId }, function (phone) {
                $scope.mainImageUrl = phone.images[0];
            });

            $scope.setImage = function (imageUrl) {
                $scope.mainImageUrl = imageUrl;
            }
        }

        //var PhoneListCtrl = ['$scope', '$http', function ($scope, $http) {
        //    $http.post('/Angular/PhoneData').success(function (data) {
        //        $scope.phones = data;
        //    });

        //    $scope.orderProp = 'age';
        //}];

        //function PhoneDetailCtrl($scope, $routeParams, $http) {
        //    $http.post('/Angular/PhoneData', { phoneId: $routeParams.phoneId }).success(function (data) {
        //        $scope.phone = data;
        //        $scope.mainImageUrl = data.images[0];
        //    });

        //    $scope.setImage = function (imageUrl) {
        //        $scope.mainImageUrl = imageUrl;
        //    }
        //}

    </script>
</body>
</html>
